<template>
    <div id="main" class="main">

        <!-- 购物车列表 -->

        <div id="myCart" v-if="cartsList.length>0">
            <div class="cart-tit">
                <ul>
                    <li class="li2">商品封面</li>
                    <li class="li3">商品信息</li>
                    <li class="li4">规格</li>
                    <li class="li5">单价(元)</li>
                    <li class="li6">数量</li>
                    <li class="li7">小计(元)</li>
                    <li class="li8">操作</li>
                </ul>
            </div>

            <div class="cart-cont" v-for="(item, index) in cartsList" :key="index">
                <ul class="ul1">
                    <li class="li2">
                        <a>
                            <img :src="$baseUrl + item.goods.cover.slice(2)">
                        </a>
                    </li>
                    <li class="li3">
                        <p class="goods-name">{{ item.goods.name }}</p>
                        <p class="goods-des">{{ item.goods.intro }}</p>
                    </li>
                    <li class="li4">
                        <p><span>{{ item.goods.spec }}</span><br></p>
                    </li>
                    <li class="li5">￥<span class="price">{{ item.goods.price }}</span></li>
                    <li class="li6">
                        <span class="cut" style="cursor: pointer" @click="cut(item)">-</span>
                        <input type="text" class="sum" value="1" readonly="readonly" v-model="item.carts.amount">
                        <span class="add" style="cursor: pointer" @click="add(item)">+</span>
                    </li>
                    <li class="li7">￥<span class="subtotal">{{ item.carts.amount * item.goods.price }}</span></li>
                    <li class="li8">
                        <i style="cursor: pointer" class="iconfont icon-shanchu" @click="cartDelete(item.carts.id)"></i>
                    </li>
                </ul>
            </div>
            <div class="cart-foot">
                <div class="foot-right">
                    <div class="mdd">
                        <p class="one">
                            <span>订单总额 ：<span class="price">￥<span class="m-price">{{ totalPrice }}</span></span></span>
                        </p>
                    </div>
                    <a>
                        <span class="js" style="background: rgb(255, 113, 43);" @click="toPay">去结算</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- 购物车空 -->

        <div v-else style="height: 65vh;">
            <el-empty >
            <template #description>
                <div style="color: orange;font-size: 24px;">购物车为空</div>
            </template>
            <el-button type="warning" @click="$router.push('/')" >返回首页</el-button>
        </el-empty>
        </div>

    </div>
</template>

<script>
import { getCartsInfoByUserId, deleteCartsById } from '@/request/cart'
export default {
    name: 'EshopFrontCart',
    data() {
        return {
            cartsList: []
        };
    },
    computed: {
        totalPrice: function () {
            let totalPrice = 0
            this.cartsList.forEach((item, index) => {
                totalPrice += item.goods.price * item.carts.amount
            })
            return totalPrice
        }
    },
    mounted() {
        this.getData()
    },

    methods: {
        toPay(){
            let payInfo = []
            this.cartsList.forEach((item,index)=>{
                payInfo[index] = {...item.goods,...item.carts}
            })
            this.$router.push({name:'pay',params:{payInfo}})
        },
        getData() {
            getCartsInfoByUserId(this.$store.state.user.id).then(res => {
                this.cartsList = res.data
                console.log(res);
            })
        },
        cut(item) {
            if (item.carts.amount < 2) {
                this.$message.warning("再减就没有啦~")
                return
            }
            item.carts.amount--
        },
        add(item) {
            if (item.carts.amount > item.goods.stock) {
                this.$message.warning("库存不足啦~")
                return
            }
            item.carts.amount++
        },
        cartDelete(id) {
            deleteCartsById(id).then(res => {
                this.getData()
                this.$message.success('删除成功!')

            })

        }
    },
};
</script>

<style scoped>
@import url('@/assets/css/cart.css')
</style>